<template>
  <div class="searchInput">
    <el-input v-model="input" placeholder="请输入搜索内容" >
      <template #prefix>
        <el-button type="primary">
          <el-icon><Search /></el-icon>
        </el-button>
      </template>
    </el-input>
  </div>
</template>

<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
import { ref } from "vue";
const input = ref("");
</script>

<style scoped lang="scss">
.searchInput {
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 30px;
  width: 537px;
  height: 52px;
  border-radius: 10px;

  :deep(.el-input) {
    padding: 10px;
    width: 100%;
    height: 100%;
    :deep(.el-input__wrapper) {
      background-color: transparent;
      padding: 0 !important;
    }
  }

  .el-button {
    width: 40px;
    height: 100%;
    
  }
}
</style>
